<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<script type="text/javascript" src="http://www.lovejavascript.com/js/jquery-2.1.4.min.js"></script>
	<link rel="stylesheet" type="text/css" th:href="@{/css/GridManager.css}">
	<script type="text/javascript" th:src="@{/js/GridManager.js}" ></script>
<title>GridManager:jquery环境下渲染</title>
<style>

	html, body{
		width: 100%;
		height: 100%;
		overflow-x:hidden;
		margin: 0px;
		padding: 0px;
	}
</style>
</head>

<body>

	<div class="search-area">
		<div class="sa-ele">
			<label class="se-title">用户:</label>
			<input class="se-con" name="userId"/>
			<label class="se-title">分组:</label>
			<input class="se-con" name="group"/>
		</div>
		<div class="sa-ele">
			<button class="search-action">搜索</button>
			<button class="reset-action">重置</button>
		</div>
	</div>
	<br/>
	<div class="dialog-demo">
		<table grid-manager="demoOne"></table>
	</div>
<script type="text/javascript" >
	function showVal(taskId){
		$.post("/holiday/show", {taskId:taskId},
			function(data,status){
                console.log(data);
                alert(data);
				$('table').GM('setQuery', null, function(){
				});
			}
		);
	}

	function showPNG(piId){
        window.open("/flowable/processDiagram?processId="+piId);
	}

    function approve(approve, taskId, type){
	    var url = "/holiday/approve";
	    var data = {taskId:taskId, approve:approve};
        if(type.indexOf("Expense") !== -1){
            url = "/expense/reject";
            if(approve){
                url = "/expense/apply";
			}
		}

        $.post(url, data,
			function(data,status){
				$('table').GM('setQuery', null, function(){
					console.log('刷新执行成功');
				});
			}
		);
    }

    // 绑定搜索事件
    document.querySelector('.search-action').addEventListener('click', function () {
        var _query = {
            userId: document.querySelector('[name="userId"]').value,
            group: document.querySelector('[name="group"]').value
        };
        $('table').GM('setQuery', _query, function(){
        });
    });

    // 绑定重置
    document.querySelector('.reset-action').addEventListener('click', function () {
        document.querySelector('[name="userId"]').value = '';
        document.querySelector('[name="group"]').value = '';
    });

	$('table').GM({
		supportRemind: false,
		gridManagerName: 'test',
//			,disableCache:true,
		height: '300px',
		supportAjaxPage:true,
		supportSorting: true,
		ajax_url: '/flowable/task/list',
		ajax_type: 'POST',
		query: {userId: ''},
		pageSize:20,
		columnData: [
            {key: 'action', remind: 'the action', text: '操作', width: '150px', template: function(action, rowObject){
                    return '<button class="plugin-action edit-action" onclick="showVal(\''+rowObject.id+'\')">参数</button>'
                        +'&nbsp;<button class="plugin-action del-action" onclick="approve(true, \''+rowObject.id+'\',\''+rowObject.processDefinitionId+'\')">批准</button>'
                        +'&nbsp;<button class="plugin-action del-action" onclick="approve(false, \''+rowObject.id+'\',\''+rowObject.processDefinitionId+'\')">不允许</button>'
                    +'&nbsp;<button class="plugin-action del-action" onclick="showPNG(\''+rowObject.processInstanceId+'\')">预览</button>';
            }},
            {key: 'id', text: '任务ID', sorting: 'DESC'},
            {key: 'delegationState', text: '状态'},
		    {key: 'category', text: '类别', width: '120px'},
            {key: 'name', text: '当前节点名称', width: '250px'},
            {key: 'claimTime', text: '限制时间', width: '150px'},
			{key: 'createTime', text: '创建时间', width: '150px'},
            {key: 'description', text: '说明', width: '200px'},
			{key: 'deuDate', text: 'deuDate', width: '200px'},
            {key: 'executionId', text: '执行Id', width: '200px'},
            {key: 'formKey', text: '表单Id'},
            {key: 'owner', text: '创建人'},
            {key: 'parentTaskId', text: '父任务Id'},
            {key: 'priority', text: '优先级'},
            {key: 'processDefinitionId', text: '流程定义Id'},
            {key: 'processInstanceId', text: '流程实例Id'},
            {key: 'scopeDefinitionId', text: '范围定义Id'},
            {key: 'scopeId', text: '范围Id'},
            {key: 'scopeType', text: '范围类型'},
            {key: 'subScopeId', text: '子范围标识'},
            {key: 'taskDefinitionId', text: '任务定义Id'},
            {key: 'taskDefinitionKey', text: '任务定义Key'},
            {key: 'tenantId', text: '租户Id'}
		],
		// 分页前事件
		pagingBefore: function(query){
			console.log('pagingBefore', query);
		},
		// 分页后事件
		pagingAfter: function(data){
			console.log('pagingAfter', data);
		},
		// 排序前事件
		sortingBefore: function (data) {
			console.log('sortBefore', data);
		},
		// 排序后事件
		sortingAfter: function (data) {
			console.log('sortAfter', data);
		},
		// 宽度调整前事件
		adjustBefore: function (event) {
			console.log('adjustBefore', event);
		},
		// 宽度调整后事件
		adjustAfter: function (event) {
			console.log('adjustAfter', event);
		},
		// 拖拽前事件
		dragBefore: function (event) {
			console.log('dragBefore', event);
		},
		// 拖拽后事件
		dragAfter: function (event) {
			console.log('dragAfter', event);
		}
	});


</script>
</body>
</html>
